﻿<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>指尖交易</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
		<link rel="stylesheet" href="css/swiper.css">
		<link rel="stylesheet" href="css/animate.min.css">
		<script src="js/swiper.js"></script>
		<script src="js/swiper.animate.js"></script>

		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				height: 100%;
			}
			
			.swiper-container {
				width: 100%;
				height: 100%;
				background-color: #2366BA;
			}
			
			.swiper-slide {
				width: 100%;
				height: 100%;
				background-size: 100% 100%;
				overflow: hidden;
			}
			
			.ani {
				position: absolute;
			}
			
			.rotateStyle {
				animation: rotate 10s linear infinite;
				-webkit-animation: rotate 10s linear infinite;
				-moz-animation: rotate 10s linear infinite;
				-ms-animation: rotate 10s linear infinite;
			}
			
			@-moz-keyframes rotate {
				from {
					transform: rotate(0deg);
					-webkit-transform: rotate(0deg);
					-moz-transform: rotate(0deg);
				}
				to {
					transform: rotate(-360deg);
					-webkit-transform: rotate(-360deg);
					-moz-transform: rotate(-360deg);
				}
			}
			
			@-webkit-keyframes rotate {
				from {
					transform: rotate(0deg);
					-webkit-transform: rotate(0deg);
					-moz-transform: rotate(0deg);
				}
				to {
					transform: rotate(-360deg) -webkit-transform: rotate(-360deg);
					-moz-transform: rotate(-360deg);
				}
			}
			
			@-o-keyframes rotate {
				from {
					transform: rotate(0deg);
					-webkit-transform: rotate(0deg);
					-moz-transform: rotate(0deg);
				}
				to {
					transform: rotate(-360deg);
					-webkit-transform: rotate(-360deg);
					-moz-transform: rotate(-360deg);
				}
			}
			
			@keyframes rotate {
				from {
					transform: rotate(0deg);
					-webkit-transform: rotate(0deg);
					-moz-transform: rotate(0deg);
				}
				to {
					transform: rotate(-360deg);
					-webkit-transform: rotate(-360deg);
					-moz-transform: rotate(-360deg);
				}
			}
		</style>
	</head>

	<body>
		
		<img data-sta='0' id="musicbtn" class="rotateStyle" style="position: fixed;top: 20px;right: 20px;z-index: 1000;" src="images/voice.png" />
		<audio loop="loop" id="music" autoplay="autoplay" src="images/dzxd.mp3"></audio>
		
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<section class="swiper-slide swiper-slide1">
					<img src="images/p0-earth.png" class="ani resize" style="width:150px;left:84px;top:23px;z-index:1;" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s" />
					<img src="images/p0-text0.png" class="ani resize" style="width:168px;left:66px;top:20px;z-index:2;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.4s" />
					<img src="images/p0-text1.png" class="ani resize" style="width:160px;left:85px;top:85px;z-index:2;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s" />
					<img src="images/p0-text2.png" class="ani resize" style="width:219px;left:50px;top:170px;z-index:2;" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="1s" />
					<img src="images/p0-sun.png" class="ani resize" style="width:39px;left:155px;top:260px;z-index:2;" swiper-animate-effect="rollIn" swiper-animate-duration="2s" swiper-animate-delay="1s" />
					<img src="images/p0-footer.png" class="ani resize" style="width:320px;left:0px;bottom:0px;z-index:1;" />
					<img src="images/arrow.png" style="width:30px; top:460px; left:150px;z-index: 3;" id="array" class="ani resize">
				</section>
				<section class="swiper-slide swiper-slide2  ">
					<div style="position: relative;width: 100%;height: 100%;">
						<img data-src="images/bg-all.png" class="swiper-lazy ani bg-rotate rotateStyle" style="height:140%;left:0; right:0; top:0; bottom:0;" />
						<img data-src="images/p1-text0.png" class="swiper-lazy ani resize" style="width:280px;left:20px;top:25px;z-index:2;" />
						<img data-src="images/p1-lo0.png" class="swiper-lazy ani resize" style="width: 258px;left:30px;top:95px;z-index:2;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s" />
						<img data-src="images/p1-lo1.png" class="swiper-lazy ani resize" style="width: 247px;left:38px;top:205px;z-index:2;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s" />
						<img data-src="images/p1-lo2.png" class="swiper-lazy ani resize" style="width: 259px;left:30px;top:305px;z-index:2;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1s" />
						<img src="images/arrow.png" style="width:30px; top:460px; left:150px;z-index: 3;" id="array" class="ani resize">
					</div>
				</section>
				<section class="swiper-slide swiper-slide3  ">
					<div style="position: relative;width: 100%;height: 100%;">
						<img data-src="images/bg-all.png" class="swiper-lazy ani bg-rotate rotateStyle" style="height:140%;left:0; right:0; top:0; bottom:0;" />
						<img data-src="images/p2-text0.png" class="swiper-lazy ani resize" style="width:288px;left:20px;top:25px;z-index:2;" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="0s" />
						<img data-src="images/p2-lo1.png" class="swiper-lazy ani resize" style="width:232px;left:75px;top:65px;z-index:2;" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="1s" />
						<img data-src="images/p2-text1.png" class="swiper-lazy ani resize" style="width:175px;left:114px;top:94px;z-index:2;" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="1s" />
						<img data-src="images/p2-lo0.png" class="swiper-lazy ani resize" style="width:115px;left:55px;top:220px;z-index:3;" swiper-animate-effect="bounce" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" />
						<img data-src="images/p2-text2.png" class="swiper-lazy ani resize" style="width:242px;left:40px;top:338px;z-index:3;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2.5s" />
						<img data-src="images/p2-lo2.png" class="swiper-lazy ani resize" style="width:91px;left:180px;top:378px;z-index:3;" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="3s" />
						<img src="images/arrow.png" style="width:30px; top:460px; left:150px;z-index: 3;" id="array" class="ani resize">
					</div>
				</section>
				<section class="swiper-slide swiper-slide4  ">
					<div style="position: relative;width: 100%;height: 100%;">
						<img data-src="images/bg-all.png" class="swiper-lazy ani bg-rotate rotateStyle" style="height:140%;left:0; right:0; top:0; bottom:0;" />
						
						<img data-src="images/p3-text0.png" class="swiper-lazy ani resize" style="width:100px;left:95px;top:20px;z-index:2;" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="0s" />
						<img data-src="images/p3-lo0.png" class="swiper-lazy ani resize" style="width:73px;left:57px;top:55px;z-index:2;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="0.6s" />
						<img data-src="images/p3-bg.png" class="swiper-lazy ani resize" style="width:128px;left:163px;top:50px;z-index:2;" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.3s" swiper-animate-delay="1s" />
						<img data-src="images/p3-text1.png" class="swiper-lazy ani resize" style="width:100px;left:176px;top:80px;z-index:3;" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.3s" swiper-animate-delay="1s" />
						<img data-src="images/p3-bg.png" class="swiper-lazy ani resize" style="width:128px;left:45px;top:145px;z-index:2;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="2s" />
						<img data-src="images/p3-text2.png" class="swiper-lazy ani resize" style="width:105px;left:55px;top:174px;z-index:3;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="2s" />
						<img data-src="images/p3-lo1.png" class="swiper-lazy ani resize" style="width:94px;left:185px;top:160px;z-index:2;" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.3s" swiper-animate-delay="1.6s" />
						<img data-src="images/p3-lo2.png" class="swiper-lazy ani resize" style="width:67px;left:75px;top:250px;z-index:2;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="2.6s" />
						<img data-src="images/p3-bg.png" class="swiper-lazy ani resize" style="width:128px;left:163px;top:245px;z-index:2;" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.3s" swiper-animate-delay="3s" />
						<img data-src="images/p3-text3.png" class="swiper-lazy ani resize" style="width:100px;left:174px;top:275px;z-index:3;" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.3s" swiper-animate-delay="3s" />
						<img data-src="images/p3-bg.png" class="swiper-lazy ani resize" style="width:128px;left:35px;top:335px;z-index:2;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="4s" />
						<img data-src="images/p3-text4.png" class="swiper-lazy ani resize" style="width:105px;left:45px;top:365px;z-index:3;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="4s" />
						<img data-src="images/p3-lo3.png" class="swiper-lazy ani resize" style="width:113px;left:175px;top:350px;z-index:2;" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.3s" swiper-animate-delay="3.6s" />
						<img src="images/arrow.png" style="width:30px; top:460px; left:150px;z-index: 3;" id="array" class="ani resize">
					</div>
				</section>
				<section class="swiper-slide swiper-slide5  ">
					<div style="position: relative;width: 100%;height: 100%;">
						<img data-src="images/bg-all.png" class="swiper-lazy ani bg-rotate rotateStyle" style="height:140%;left:0; right:0; top:0; bottom:0;" />
						<img data-src="images/p4-text5.png" class="swiper-lazy ani resize" style="width:258px;left:23px;top:15px;z-index:2;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" />
						<img data-src="images/p4-text0.png" class="swiper-lazy ani resize" style="width:260px;left:23px;top:80px;z-index:2;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s" />
						<img data-src="images/p4-text1.png" class="swiper-lazy ani resize" style="width:250px;left:23px;top:135px;z-index:2;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.7s" />
						<img data-src="images/p4-text2.png" class="swiper-lazy ani resize" style="width:267px;left:23px;top:188px;z-index:2;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s" />
						<img data-src="images/p4-text3.png" class="swiper-lazy ani resize" style="width:263px;left:23px;top:238px;z-index:2;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.9s" />
						<img data-src="images/p4-text4.png" class="swiper-lazy ani resize" style="width:260px;left:23px;top:288px;z-index:2;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s" />
						<img data-src="images/p4-lo0.png" class="swiper-lazy ani resize" style="width:133px;left:75px;top:323px;z-index:1;" swiper-animate-effect="rubberBand" swiper-animate-duration="0.5s" swiper-animate-delay="1s" />
						<img data-src="images/p4-lo1.png" class="swiper-lazy ani resize" style="width:153px;right:0;bottom: 0;z-index:0;" swiper-animate-effect="rubberBand" swiper-animate-duration="0.5s" swiper-animate-delay="1s" />
						<img src="images/arrow.png" style="width:30px; top:460px; left:150px;z-index: 3;" id="array" class="ani resize">
					</div>
				</section>
				<section class="swiper-slide swiper-slide6  ">
					<div style="position: relative;width: 100%;height: 100%;">
						<img data-src="images/bg-all.png" class="swiper-lazy ani bg-rotate rotateStyle" style="height:140%;left:0; right:0; top:0; bottom:0;" />
						<img data-src="images/p5-text1.png" class="swiper-lazy ani resize" style="width:120px;left:95px;top:25px;z-index:2;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.7s" swiper-animate-delay="0s" />
						<img data-src="images/p5-lo0.png" class="swiper-lazy ani resize" style="width:100px;left:57px;top:82px;z-index:2;" swiper-animate-effect="fadeIn" swiper-animate-duration="1.3s" swiper-animate-delay="0.8s" />
						<img data-src="images/p5-lo1.png" class="swiper-lazy ani resize" style="width:115px;left:163px;top:84px;z-index:2;" swiper-animate-effect="fadeIn" swiper-animate-duration="1.3s" swiper-animate-delay="1.6s" />
						<img data-src="images/p5-text0.png" class="swiper-lazy ani resize" style="width:254px;left:25px;top:245px;z-index:2;" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="3s" />
						<img data-src="images/p5-lo2.png" class="swiper-lazy ani resize" style="width:104px;left:35px;top:275px;z-index:2;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="4.5s" />
						<img data-src="images/p5-lo3.png" class="swiper-lazy ani resize" style="width:104px;left:175px;top:275px;z-index:2;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="4.5s" />
					</div>
				</section>
			</div>
		</div>

		<script>
			scaleW = window.innerWidth / 320;
			scaleH = window.innerHeight / 480;
			var resizes = document.querySelectorAll('.resize');
			for(var j = 0; j < resizes.length; j++) {
				resizes[j].style.width = parseInt(resizes[j].style.width) * scaleW + 'px';
				resizes[j].style.height = parseInt(resizes[j].style.height) * scaleH + 'px';
				resizes[j].style.top = parseInt(resizes[j].style.top) * scaleH + 'px';
				resizes[j].style.left = parseInt(resizes[j].style.left) * scaleW + 'px';
			}
			var resizes2 = document.querySelectorAll('.bg-rotate');
			for(var k = 0; k < resizes2.length; k++) {
				resizes2[k].style.top = '-' + 0.2 * window.innerHeight + 'px';
				resizes2[k].style.left = '-' + (1.4 * window.innerHeight - window.innerWidth) / 2 + 'px';
			}
			var mySwiper = new Swiper('.swiper-container', {
				direction: 'vertical',
				observer: true,
				lazyLoading: true,
				lazyLoadingInPrevNext: true,
				onInit: function(swiper) {
					swiperAnimateCache(swiper);
					swiperAnimate(swiper);
				},
				onSlideChangeEnd: function(swiper) {
					swiperAnimate(swiper);
				},
				onTransitionEnd: function(swiper) {
					swiperAnimate(swiper);
				},
				onProgress: function(swiper) {
					for(var i = 0; i < swiper.slides.length; i++) {
						var slide = swiper.slides[i];
						var progress = slide.progress;
						var translate = progress * swiper.height / 4;
						scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
						var opacity = 1 - Math.min(Math.abs(progress / 2), 0.5);
						slide.style.opacity = opacity;
						es = slide.style;
						es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,' + translate + 'px,-' + translate + 'px) scaleY(' + scale + ')';
					}
				},
				onSetTransition: function(swiper, speed) {
					for(var i = 0; i < swiper.slides.length; i++) {
						es = swiper.slides[i].style;
						es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';

					}
				},onTouchEnd: function(swiper) {
					swiperAnimate(swiper);
				}
			});
			
			document.querySelector('#musicbtn').onclick = function() {
				var ele = document.querySelector('#music');
				var voice = document.querySelector('#musicbtn')
				var au = ele.paused;
				if(au) {
					ele.play();
					voice.className='rotateStyle';
				} else {
					ele.pause();
					voice.className='';
				}
			}
		</script>

	</body>

</html>